<script setup>
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
const routeMap = {
  '/products/show/list': '1',
  '/products/category': '2',
  '/products/review': '3',
  '/products/stock/shortage/application': '4',
}
const defaultActive = ref('1')
const route = useRoute()
watchEffect(() => {
  const matchedIndex = routeMap[route.path]
  if (matchedIndex) {
    defaultActive.value = matchedIndex
  }
})
</script>

<template>
  <div class="aside">
    <el-menu :default-active="defaultActive" :router="true">
      <el-menu-item index="1" route="/products/show/list">商品列表</el-menu-item>
      <el-menu-item index="2" route="/products/category">商品分类</el-menu-item>
      <el-menu-item index="3" route="/products/review">商品评价</el-menu-item>
      <el-menu-item index="4" route="/products/stock/shortage/application">缺货申请</el-menu-item>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
.aside {
  height: 100%;
}

.el-menu {
  border: none;
  .el-menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #333333;
    &:hover {
      color: #1890ff;
    }
  }

  .el-menu-item.is-active {
    background-color: #f5f5f5;
    color: #1890ff;
  }
}
</style>
